<!DOCTYPE html>
<html xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:th="http://www.w3.org/1999/xhtml">
<div th:replace="/common/header :: header"></div>
<body >

<!--<div class="home_bac">-->
<!--	<div class="home_header">-->
<!--		<div class="clearfix warp">-->
<!--			<a href="#" class="home_lol"><img src="images/logo.png"></a>-->
<!--			<div class="clearfix home_lor">-->
<!--				<a href="#" class="home_user">-->
<!--					<img src="images/a8.png" class="">132000000000-->
<!--				</a>-->
<!--				<a href="#" class="home_exit">-->
<!--					<img src="images/a10.png">Exit-->
<!--				</a>-->
<!--			</div>-->
<!--			&lt;!&ndash; <header class="cd-header"><a href="#0" class="cd-3d-nav-trigger nav_open"><span></span></a></header> &ndash;&gt;-->
<!--		</div>-->
<!--	</div>-->
<!--	<div class="home_nav">-->
<!--		<ul class="home_nav_list clearfix">-->
<!--			<li class="active"><a href="#">Home</a></li>-->
<!--			<li><a href="#">Order</a></li>-->
<!--			<li><a href="#">Shuttle</a></li>-->
<!--			<li><a href="#">Charter</a></li>-->
<!--			<li><a href="#">Auction</a></li>-->
<!--			<li><a href="#">Cashier</a></li>-->
<!--		</ul>-->
<!--	</div>-->
<style>
	.home_ipu{width: 61%;}
</style>
<div class="home_mol" id="app">
	<div class="home_mtab" style="padding: 0 0 20px 0;">
		<!--			<p class="home_tit">Information  Center</p>-->
		<ul class="home_bot" style="border: 0">
			<li class="clearfix">
				<p class="home_pfl">Contact Number</p>
				<p class="home_pfr">{{currentUser.phone}}</p>
			</li>
			<li class="clearfix">
				<p class="home_pfl">Email</p>
				<p class="home_pfr">{{currentUser.user_email}}</p>
			</li>

			<li class="clearfix">
				<p class="home_pfl">Passengers</p>
				<div class="clearfix home_ipu">
					<input type="text" class="home_input" v-model="order.passengers" placeholder="Number">
				</div>
				<!--					<img src="images/a13.png" class="order_wen">-->
			</li>
			<li class="clearfix">
				<p class="home_pfl">Pick Up Time</p>
				<div class="clearfix home_ipu">
					<input type="text" v-model="order.time_depart" class="home_input"  id="time_depart" placeholder="yyyy-MM-dd HH:mm:ss">
					<img src="/images/a12.png" class="home_rli">
				</div>
			</li>
			<li class="clearfix">
				<p class="home_pfl">From</p>
				<div class="order_hi">
					<div class="clearfix home_ipu">
						<input type="text" v-model="order.fromwhere" class="home_input" placeholder="From" >
					</div>
					<p class="order_fpirs"  v-on:click="addAddress">Via</p>
				</div>
			</li>
			<li class="clearfix" v-for="(item,index) in order.stop">
				<p class="home_pfl">And</p>
				<div class="order_hi">
					<div class="clearfix home_ipu">
						<input type="text" v-model="order.stop[index].stop" class="home_input" placeholder="And" >
					</div>
					<p class="order_fpirs" v-on:click="reduceAddress">-</p>
				</div>
			</li>
			<li class="clearfix">
				<p class="home_pfl">To</p>
				<div class="clearfix home_ipu">
					<input type="text" class="home_input" v-model="order.towhere" placeholder="To">
				</div>
			</li>
			<li class="clearfix">
				<p class="home_pfl">Big Luggage</p>
				<div class="clearfix home_ipu">
					<input type="text" class="home_input" v-model="order.big_luggage" placeholder="Number">
				</div>
			</li>
			<li class="clearfix">
				<p class="home_pfl">Carry Luggage</p>
				<div class="clearfix home_ipu">
					<input type="text" class="home_input" v-model="order.carry_luggage" placeholder="Number">
				</div>
			</li>
			<li class="clearfix layui-form">
				<p class="home_pfl"></p>
				<div class="clearfix home_ipu">
					<input type="checkbox" lay-filter="tolls" title="Tolls" lay-skin="primary" value="1">
				</div>
			</li>
			<li class="clearfix layui-form">
				<p class="home_pfl"></p>
				<div class="clearfix home_ipu">
					<input type="checkbox" lay-filter="airportParkingFee" title="AirportParkingFee" lay-skin="primary" value="1">
				</div>
			</li>

			<li class="clearfix layui-form">
				<p class="home_pfl"></p>
				<div class="clearfix home_ipu">
					<input type="checkbox" lay-filter="Trailer" title="Trailer Required" lay-skin="primary" value="1">
				</div>
			</li>

			<li class="clearfix">
				<p class="home_pfl">Remarks</p>
				<div class="clearfix home_ipu">
					<textarea class="order_tarea" v-model="order.extra_request"></textarea>
				</div>
			</li>
<!--			<div v-bind:style='{display:showMore? "block" : "none" }'>-->
				<li class="clearfix">
					<p class="home_pfl">Other Contact Number</p>
					<div class="clearfix home_ipu">
						<input type="text" class="home_input" v-model="order.other_contact_phone" placeholder="Other Contact Number">
					</div>
				</li>
				<li class="clearfix">
					<p class="home_pfl">Other Email</p>
					<div class="clearfix home_ipu">
						<input type="text" class="home_input" v-model="order.other_contact_email" placeholder="Other Email">
					</div>
				</li>
				<li class="clearfix">
					<p class="home_pfl">Flight_id</p>
					<div class="clearfix home_ipu">
						<input type="text" class="home_input" v-model="order.flight_id" placeholder="Flight_id">
					</div>
				</li>
				<li class="clearfix">
					<p class="home_pfl">Baby Seats(0-3yr)</p>
					<div class="clearfix home_ipu">
						<input type="text" class="home_input" v-model="order.babyseats_s" placeholder="Number">
					</div>
				</li>
				<li class="clearfix">
					<p class="home_pfl">Baby Seats(3-7yr)</p>
					<div class="clearfix home_ipu">
						<input type="text" class="home_input" v-model="order.babyseats_b" placeholder="Number">
					</div>
				</li>
				<li class="clearfix">
					<p class="home_pfl">WH_with</p>
					<div class="clearfix home_ipu">
						<input type="text" class="home_input" v-model="order.WH_with" placeholder="Number">
					</div>
				</li>
				<li class="clearfix">
					<p class="home_pfl">WH_OnBoard</p>
					<div class="clearfix home_ipu">
						<input type="text" class="home_input" v-model="order.WH_OnBoard" placeholder="Number">
					</div>
				</li>
				<li class="clearfix layui-form">
					<p class="home_pfl"></p>
					<div class="clearfix home_ipu">
						<input type="checkbox" v-model="order.NPEF" lay-filter="nationalParkEntryFee" title="National Park Entry Fee" lay-skin="primary" >
					</div>
				</li>
				<li class="clearfix layui-form">
					<p class="home_pfl"></p>
					<div class="clearfix home_ipu">
						<input type="checkbox" v-model="order.driver_DM" lay-filter="driver_DM" title="Driver Meal and Accommodation" lay-skin="primary" >
					</div>
				</li>
<!--			</div>-->


			<!--				<li class="clearfix layui-form">-->
			<!--					<p class="home_pfl">Order Type</p>-->
			<!--					<div class="clearfix home_ipu">-->
			<!--						<div class="layui-inline order_put">-->
			<!--							<select name="interest" lay-filter="aihao" v-model="order.order_type">-->
			<!--								<option value="0" >待审核</option>-->
			<!--								<option value="1">发布</option>-->
			<!--							</select>-->
			<!--						</div>-->
			<!--					</div>-->
			<!--				</li>-->
<!--			<li class="clearfix">-->
<!--				<div class="home_button" v-on:click="showMoreFun">{{showMoreTxt}}</div>-->
<!--			</li>-->
			<li class="clearfix">
				<!--					<p class="home_pfl">Options</p>-->
				<!--					<dl class="order_ohi clearfix">-->
				<!--						<dd class="order_dil clearfix">-->
				<!--							<div class="clearfix order_wont">-->
				<!--								<input type="checkbox" class="order_che">-->
				<!--								<p class="home_pfr">Big Luggage</p>-->
				<!--								<img src="images/a13.png" class="order_wen">-->
				<!--							</div>-->
				<!--							<p class="order_pfr">Pieces</p>-->
				<!--							<input type="text" class="order_miput">-->
				<!--						</dd>-->
				<!--						<dd class="order_dil clearfix">-->
				<!--							<div class="clearfix order_wont">-->
				<!--								<input type="checkbox" class="order_che">-->
				<!--								<p class="home_pfr">Carry Luggage</p>-->
				<!--								<img src="images/a13.png" class="order_wen">-->
				<!--							</div>-->
				<!--							<p class="order_pfr">Pieces</p>-->
				<!--							<input type="text" class="order_miput">-->
				<!--						</dd>-->
				<!--						<dd class="order_dil clearfix">-->
				<!--							<div class="clearfix order_wont">-->
				<!--								<input type="checkbox" class="order_che">-->
				<!--								<p class="home_pfr">Baby Seats</p>-->
				<!--								<img src="images/a13.png" class="order_wen">-->
				<!--							</div>-->
				<!--							<p class="order_pfr">0-3yr</p>-->
				<!--							<input type="text" class="order_miput">-->
				<!--							<p class="order_pfrs">3-7yr</p>-->
				<!--							<input type="text" class="order_miput">-->
				<!--						</dd>-->
				<!--						<dd class="order_dil clearfix">-->
				<!--							<div class="clearfix order_wont">-->
				<!--								<input type="checkbox" class="order_che">-->
				<!--								<p class="home_pfr">Wheel Chairs</p>-->
				<!--								<img src="images/a13.png" class="order_wen">-->
				<!--							</div>-->
				<!--							<p class="order_pfr">WithPerson</p>-->
				<!--							<input type="text" class="order_miput">-->
				<!--							<p class="order_pfrs2">or On Board Only</p>-->
				<!--							<input type="text" class="order_miput">-->
				<!--						</dd>-->
				<!--						<dd class="order_dil clearfix">-->
				<!--							<div class="clearfix order_wont">-->
				<!--								<input type="checkbox" class="order_che">-->
				<!--								<p class="home_pfr">Trailer Required</p>-->
				<!--								<img src="images/a13.png" class="order_wen">-->
				<!--							</div>-->
				<!--						</dd>-->
				<!--						<dd class="order_dil clearfix">-->
				<!--							<div class="clearfix order_wont">-->
				<!--								<input type="checkbox" class="order_che">-->
				<!--								<p class="home_pfr">Toll Included</p>-->
				<!--								<img src="images/a13.png" class="order_wen">-->
				<!--							</div>-->
				<!--						</dd>-->
				<!--						<dd class="order_dil clearfix">-->
				<!--							<div class="clearfix order_wonts">-->
				<!--								<input type="checkbox" class="order_che">-->
				<!--								<p class="home_pfr">river Meal and Accommodation</p>-->
				<!--								<img src="images/a13.png" class="order_wen">-->
				<!--							</div>-->
				<!--						</dd>-->
				<!--					</dl>-->
			</li>



			<li class="clearfix">
				<div class="home_button" v-on:click="save">Let Me See the Order</div>
			</li>
		</ul>
	</div>
	<!--		<div class="home_foot">-->
	<!--			<div class="clearfix lg_boa">-->
	<!--				<a href="#">Contact Us</a>-->
	<!--				<a href="#">About Us</a>-->
	<!--				<a href="#">Readme Before Use</a>-->
	<!--			</div>-->
	<!--			<p class="lg_boits">@Better Price Better Go</p>-->
	<!--		</div>-->
</div>

<script>
// nav
$(document).ready(function($){
	$('.cd-3d-nav-trigger').on('click', function(){
		toggle3dBlock(!$('.cd-header').hasClass('nav-is-visible'));
	});

	function toggle3dBlock(addOrRemove) {
		if(typeof(addOrRemove)==='undefined') addOrRemove = true;	
		$('.cd-header').toggleClass('nav-is-visible', addOrRemove);
	}
});
</script>
<script th:inline="javascript">
	/*加载layui组件*/
	var laydate = null, laypage = null, layer = null, table = null, carousel = null, upload = null, element = null ,form = null;
	layui.use([ 'laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element' ], function() {
		laydate = layui.laydate //日期
				, layer = layui.layer //弹层
				, form = layui.form
		//国际版
		laydate.render({
			elem: '#time_depart'
			,type: 'datetime'
			,lang: 'en'
			,btns:[ 'now', 'confirm']
			,trigger: 'click' //采用click弹出
			,done: function(value, date, endDate){
				app.order.time_depart = value;
			}
			// ,value:new Date()
		});
		laydate.render({
			elem: '#insur_expired'
			,lang: 'en'
			,btns:[ 'now', 'confirm']
			,done: function(value, date, endDate){
				app.currentUser.driver.insur_expired = value;
			}
			// ,value:new Date()
		});
		form.on('checkbox(Trailer)', function(data){
			console.log(data);
			app.order.trailer= data.value;
		});
		form.on('checkbox(driver_DM)', function(data){
			console.log(data);
			app.order.driver_DM= data.value;
		});

	});
	var currentUser = JSON.parse('[[${session.currentUser}]]');
	var order = JSON.parse('[[${order}]]')
	var editOrder_url = Bus4uUtil.serverUrl+"order/update";
	var app = new Vue({
		el:"#app",
		data:{
			// order:order
			addAddressList:this.order.stop?this.order.stop:[],
			currentUser:currentUser,
			order:order
		},
		methods: {
			save: function (event) {
				//执行修改订单
				$.ajax({
					url:editOrder_url,
					type:"post",
					data:this.order,
					success:function(d){
						if(d.code=="0"){
							layer.msg("操作成功");
							parent.location.reload();
						}else{
							layer.msg(d.msg)
						}
					}
				});
			},
			//增加 停留地点
			addAddress:function () {
				if(this.addAddressList.length>4){
					layer.msg("最多只能增加5个");
					return false;
				}
				let obj = {};
				obj.stop = null;
				this.addAddressList.push(obj);
				this.$set(this.order,"stop",this.addAddressList);
				console.log(this.order.stop.length)
			},
			//删除 停留地点
			reduceAddress:function () {
				this.addAddressList.pop();
				this.$set(this.order,"stop",this.addAddressList);
				console.log(this.order.stop.length)
			}
		},
	});

</script>
</body>
</html>
